<div class="min-screen-full-height container relative" [class.is-night]="$isNightTheme()" [class.over-modal]="isOverModel">
  <div class="min-screen-full-height" nz-row style="padding: 0 5%">
    <div class="relative min-screen-full-height" nz-col [nzLg]="0" [nzMd]="0" [nzSm]="0" [nzXl]="12" [nzXs]="0" [nzXXl]="10">
      <div class="absolute logo center">
        <img alt="ant" src="imgs/logo-color.svg" style="width: 48px" />
        <span>AntDesignPro</span>
      </div>
      <div class="full-height flex-column center" style="align-items: flex-start">
        <div><img alt="ant" src="imgs/login1/login-box-bg.svg" style="width: 50%" /></div>
        <div class="desc"><span>开箱即用的中后台管理系统</span></div>
        <div class="sub-desc"><span>输入您的个人详细信息开始使用！</span></div>
      </div>
    </div>
    <div class="relative min-screen-full-height center" nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="12" [nzXs]="24" [nzXXl]="14">
      <div class="full-height flex-column center">
        <nz-card [class.is-night]="$isNightTheme()" [nzBordered]="isOverModel">
          <ng-template appAd></ng-template>
        </nz-card>
      </div>
    </div>
  </div>

  <div class="absolute screen-full-width p-l-16 p-r-16" nz-row nzJustify="space-between" style="top: 16px">
    @if (!isOverModel) {
      <div nz-col></div>
    }
    @if (isOverModel) {
      <div nz-col>
        <img alt="ant" src="imgs/logo-color.svg" style="width: 32px" />
        <span class="sp-16 m-l-8" style="color: white">AntDesignPro</span>
      </div>
    }
    <div nz-col>
      <nz-switch [ngModel]="$isNightTheme()" [nzCheckedChildren]="checkedTemplate" [nzUnCheckedChildren]="unCheckedTemplate" (ngModelChange)="changeNight($event)"></nz-switch>
      <ng-template #checkedTemplate><img alt="" src="imgs/login1/sun.svg" /></ng-template>
      <ng-template #unCheckedTemplate><img alt="" src="imgs/login1/moon.svg" /></ng-template>

      <span class="hand-model m-l-8" nz-dropdown [nzDropdownMenu]="language">
        <i nz-icon nzTheme="outline" nzType="font-size" [style.color]="$isNightTheme() === false ? (isOverModel ? 'white' : 'black') : 'white'"></i>
      </span>
      <nz-dropdown-menu #language="nzDropdownMenu">
        <ul nz-menu nzSelectable>
          <li nz-menu-item>English</li>
          <li nz-menu-item>Bahasa Indonesia</li>
          <li nz-menu-item>日本語</li>
          <li nz-menu-item>Português</li>
          <li nz-menu-item nzSelected>简体中文</li>
          <li nz-menu-item>繁體中文</li>
        </ul>
      </nz-dropdown-menu>
    </div>
  </div>
</div>
